<template>
    <el-menu
        mode="horizontal"   
    >
        <el-row
            v-for="(item) in props.itemList" :key="item.id"
        >
        <!-- 一级菜单 -->
        <el-menu-item :title="item.name_zh" index="item.id" v-if="item.is_root && (item.child_node == null || item.child_node == '')">
            <router-link :to="item.path" style="text-decoration: none">
                <!-- <el-icon v-if="item.type === 'element-icon'" ><component class="icon" :is="item.icon" /></el-icon> -->
                <span >{{ item.name_zh }}</span>            
            </router-link>
        </el-menu-item>

        <!-- 一级菜单分组 -->
        <el-sub-menu  index="item.id" v-if="item.child_node" >
            
            <template #title >
                <router-link :to="item.path" style="text-decoration: none">
                    <!-- <el-icon v-if="item.type === 'element-icon'" ><component class="icon" :is="item.icon" /></el-icon> -->
                    <span >{{ item.name_zh }}</span>
                </router-link>
            </template>
            
            <el-col v-for="sub in item.children" :key="sub.id">
                
            <!-- 二级菜单 -->
            <el-menu-item class="el-menu-group-item" :title="sub.name_zh" index="sub.id" >
            <router-link :to="sub.path" style="text-decoration: none">
                <el-icon v-if="sub.type === 'element-icon'" ><component class="icon" :is="sub.icon" /></el-icon>
                <span >{{ sub.name_zh }}</span>
            </router-link>
            </el-menu-item>
            </el-col>

        </el-sub-menu>
        </el-row>
    </el-menu>
</template>

<script setup>

const props = defineProps({
    itemList: {
        type: Array,
        default: () => []
    }
})

</script>

<style scoped>
.el-menu {
    height: 60px;
    width: 75%;
    background-color: rgba(0, 0, 0, 0);
}

.el-row {
    /* border: 0.3px solid gray; */
    width: 120px;
}
.el-menu-item span,
.el-sub-menu span {
    color: #fff;
}

.el-menu-item span {
    width: 20px;
}

.el-menu .el-col  {
    width: 80px;
    height: 45px;
}

.el-menu-item:hover span,
.el-sub-menu:hover span {
    color: #1e2121;
}


.el-menu-group-item span {
    color: #376cc7;
}

</style>
